$navbar-vertical-padding = 0.65rem
$navbar-horizontal-padding = 1.5rem

.navbar
  padding $navbar-vertical-padding $navbar-horizontal-padding
  line-height $navbarHeight - 1.4rem
  z-index 2000
  border-color: #e9eef2
  
  .navbar-wrapper {
    max-width 1820px
  }
  
  a, span, img
    display inline-block
    font-weight 500
    font-size: 14px
  .home-link
    margin-right 2rem
    position relative
    top .6rem
    @media (max-width: $medium) {
      margin-right 1.5rem
      top .4rem
    }
    height $navbarHeight - 2.2rem
    @media (max-width: $medium) {
      height 1.2rem
    }
  #handsontable-logo
    height $navbarHeight - 2.2rem
    @media (max-width: $medium) {
      height 1.2rem
    }
  .links
    box-sizing border-box
    white-space nowrap
    font-size 0.9rem
    position absolute
    right $navbar-horizontal-padding
    top $navbar-vertical-padding
    display flex
    align-items center
    .search-box
      flex: 0 0 auto
      vertical-align top
@media (max-width: $medium)
  .navbar
    padding-left 4rem
    .can-hide
      display none
@media (max-width: $large)
  .navbar .nav-frameworks
    display none

.nav-links
  display inline-block
  a
    outline-width: 1px;
    outline-offset: -1px;
    line-height 1.4rem
    color inherit
    &:hover, &.router-link-active
      color $accentColor
  .nav-item
    position relative
    display inline-block
    margin-left 1.5rem
    line-height 2rem
    &:first-child
      margin-left 0
  .repo-link
    margin-left 1.5rem

  @media (max-width: $medium)
    .nav-links
      .nav-item, .repo-link
        margin-left 0
  
  @media (min-width: $medium)
    .nav-links a
      &:hover, &.router-link-active
        color $textColor
    .nav-item > a
      &.router-link-active
        margin-bottom -2px
        border-bottom 2px solid lighten($accentColor, 8%)
.nav-links-right
  display inline-block
  float right
